<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>通过index页面创建的消息通道，将prot1和port2发给两个iframe，实现两个Iframe通信</h1>
    <hr>
    <iframe src="./iframe1.html" frameborder="0" id="iframe1"></iframe>
    <iframe src="./iframe2.html" frameborder="0" id="iframe2"></iframe>

    <script>
        window.onload = function () {
            const messageChannel = new MessageChannel()

            const iframe1 = document.getElementById('iframe1')
            const iframe2 = document.getElementById('iframe2')

            // 向iframe1发送消息，并将prot1端口一起发过去，注意是第三个参数，这个是一个transfer object可转移对象，转移之后发送方不再有使用权
            iframe1.contentWindow.postMessage('main-port1', '*', [messageChannel.port1])
            iframe2.contentWindow.postMessage('main-port1', '*', [messageChannel.port2])


            // 也可以用addEventListener, 注意，addEventListener之后要手动调用start()方法消息才能流动，因为初始化的时候是暂停的。onmessage已经隐式调用了start()方法。
            // messageChannel.port2.addEventListener('message', function (e) {
            //     console.log('[ e ] >', e)
            // })
            // messageChannel.port2.start();
        }

    </script>
</body>

</html>